<template>
	<view class="wrapForm">
		<view class="bgLine"></view>
		<view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
			<view class="searchBox  bgf">
				<u-search placeholder="搜索姓名" v-model="query.contactName" height="80" :show-action="false"
					bg-color="#F8F8F8" shape="square" @search='search'>
				</u-search>
			</view>
			<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :bottombar="false" :top="160">
				<view style="padding-bottom: 140rpx;">
					<view class="flex pL15 pR15 mB10 " v-for="(item,i) in list">
						<view class="nameBox">
							{{getFirst(item?.contactName)}}
						</view>
						<view class="rightPhone mL15 u-border-bottom pB10 flex jst-between alg-center">
							<view>
								<view class="font16 bold">{{item?.contactName}}</view>
								<view class="u-6 font13 mT5">{{item?.contactPhone}}</view>
							</view>
							<view class="addBtn" @click="delUser(item)">解绑</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center"
				@click="xf.onlineUtils.route(`pages/companyPage/subpackge/my/phoneAdd/index`)">
				添加联系人
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		concactLis,
		queryPhoneUser,
		delPhoneUser
	} from "@/api/companyInterface/user.js"
	export default {
		mixins: [MescrollMixin],

		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					contactName:'',
					pageSize: 10,
					pageNo: 1
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],




			};
		},
		onShow(e) {
			this.mescroll&&this.mescroll.triggerDownScroll()
		},
		methods: {
			getFirst(v) {
				return v ? v.slice(0, 1) : ''
			},
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			delUser(v) {
				let that=this;
				this.$refs.tipModal.open({
					content:"确认与"+v.contactName+'的联系人关系吗?',
					btntext:"解绑",
					showCancel:true,
					success:function(){
						delPhoneUser({id:v.id}).then(res=>{
							uni.showToast({
								icon:'none',
								title:"解绑成功",
								duration:2000
							})
							setTimeout(()=>{
								that.list = [];
								that.mescroll.resetUpScroll();
							},2000)
							
						})
					}
				})
			},
			async upCallback(page) {

				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num

				concactLis(this.query).then(res => {

					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapForm {

		height: 100%;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}

		.nameBox {
			width: 90rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: #ECEFFE;
			color: #386AFF;
			font-size: 32rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

		.rightPhone {
			width: calc(100% - 120rpx);
		}

	}

	.bgLine {
		background-color: #EBF0FF;
		width: 100%;
		height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.addBtn {
		color: #698FFF;
		height: 50rpx;
		line-height: 48rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		border: 2rpx solid #4474FF;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
</style>